<template>
	<div class="change-class-list">
		<div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
	     	<div class="widget am-cf">
	        	<div class="widget-body am-fr">
	        		<div class="am-u-md-12 one-line">
				        <div class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form each-item">
				            <div class="am-form-group">
				            	<input type="text"  v-model="query.studentName" placeholder="学生姓名"/>
				            </div>
				        </div>
				        <div class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form each-item">
				            <div class="am-form-group">
				            	<input type="text"  v-model="query.studentPhoneNo" placeholder="学生电话"/>
				            </div>
				        </div>
				        <div class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form each-item">
				            <div class="am-form-group">
				            	<input type="text"  v-model="query.operatorName" placeholder="操作人"/>
				            </div>
				        </div>
				        <div class="am-u-sm-3 am-u-end input-field each-item">
				        	<el-date-picker
			                  v-model="operateTime"
			                  type="daterange"
			                  placeholder="操作时间">
			                </el-date-picker>
				        </div>
				        <div class="am-u-sm-3 am-u-md-3 am-u-end search-btn">
					    	<button @click="search" type="button" class="btn-search am-btn am-btn-default am-btn-success">
					        	<span class="am-icon-search"></span>查询
					    	</button>
					    </div>
	        		</div>

	        		<div class="am-u-sm-12">
			            <el-table
			              :data="tableData"
			              border
			              stripe
			              empty-text="暂无数据"
			              style="min-width: 100%">
			              <el-table-column
			                label="学生姓名"
			                prop="studentName">
			              </el-table-column>
			              <el-table-column
			                label="学生电话"
			                prop="studentPhoneNo"
			                min-width="100">
			              </el-table-column>
			              <el-table-column
			                label="操作时间"
			                min-width="100">
			                <template scope="scope">
			                	{{ scope.row.operatorTime | formatTime }}
			                </template>
			              </el-table-column>
			              <el-table-column
			                label="操作人"
			                prop="operatorName">
			              </el-table-column>
			              <el-table-column
			                label="原班级名称"
			                prop="oldClassName"
			                min-width="100">
			              </el-table-column>
			              <el-table-column
			                label="原班级业务组"
			                prop="oldClassBusTeamName"
			                min-width="100">
			              </el-table-column>
			              <el-table-column
			                label="原任课教师"
			                prop="oldTeacherName"
			                min-width="100">
			              </el-table-column>
			              <el-table-column
			                label="转出讲次">
			                <template scope="scope">
			                	{{ scope.row.startAmount }} ～ {{ scope.row.endAmount }}
			                </template>
			              </el-table-column>
			              <el-table-column
			                label="新班级名称"
			                prop="className"
			                min-width="100">
			              </el-table-column>
			              <el-table-column
			                prop="busTeamName"
			                label="新班级业务组"
			                min-width="100">
			              </el-table-column>
			            </el-table>
			        </div>

			        <div class="am-u-lg-12 am-cf">
			            <div class="am-fr">
			            	<pagination v-bind:total="total" v-bind:pageNo="query.pageNo" v-bind:pageSize="query.pageSize" @paging="handleSearch" />
			            </div>
			        </div>
	        	</div>
	        </div>
	    </div>
	</div>
</template>
<script>
	import io from '../../lib/io'
	import Pagination from '../base/Pagination'
	export default{
		data(){
			return {
				tableData: [],
				query:{
					studentName: '',
					studentPhoneNo: '',
					operatorName: '',
					startDate: '',
					endDate: '',
					pageNo: 1,
					pageSize: 10,
				},
				operateTime: '',
				total: 0,
			}
		},
		watch:{
			operateTime(newVal) {
		        this.query.startDate = newVal[0] ? this.$options.filters.formatDate(newVal[0]) : ''
		        this.query.endDate = newVal[1] ? this.$options.filters.formatDate(newVal[1]): ''
		    }
		},
		components: {
	    	Pagination
	    },
		methods: {
			handleSearch(pageNo){
				this.query.pageNo = pageNo || this.query.pageNo || 1
		        io.post(io.changeClassList, this.query , (ret) => {
		        	if(ret.success){
		        		this.tableData = ret.data.list;
		        		this.total = ret.data.total;
		        	}		        	
		        })
		    },
		    search(){
	      		this.query.pageNo = 1;
	      		this.handleSearch();
	      	},
	    },
	    created(){
			this.handleSearch();
		}
	}
</script>
<style lang="less" scoped>
	.change-class-list{
		[class*=am-u-]{
			padding-left: 0;
			padding-right: 0;
			margin-left: 0.6%;
			margin-right: 0.6%;
		}
		.one-line{
			margin-left: 0;
			margin-right: 0;
		}
		.each-item{
			width: 22.552%;
		}
		.search-btn{
			width: 4.4%;
			margin-right: 0;
		}
	}
</style>